<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>周迎川的Web大作业</title>
  <!-- MDB icon -->
  <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="css/mdb.min.css">
  <!-- Your custom styles (optional) -->
  <link rel="stylesheet" href="css/style_jun.css">
</head>

<body>

  <!-- Start your project here-->
  <!--Main Navigation-->
  <header>
    <!--Navbar-->
    <nav class="navbar navbar-expand-lg navbar-dark scrolling-navbar fixed-top">

      <div class="container">

        <!-- Navbar brand -->
        <a class="navbar-brand" href="index.html">我的教育经历</a>

        <!-- Collapse button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
          aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Collapsible content -->
        <div class="collapse navbar-collapse" id="basicExampleNav">

          <!-- Links -->
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="index.html">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="primary.html" target="">小学</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="junior.html">初中</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="senior.html">高中</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="senior4.html">高四</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="university.html">大学</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="ending.html">Ending</a>
            </li>
          </ul>
          <!-- Links -->

          <!-- Social Icon  -->
          <ul class="navbar-nav nav-flex-icons">
            <li class="nav-item">
              <a class="nav-link"><i class="fab fa-facebook-f"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link"><i class="fab fa-twitter"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link"><i class="fab fa-instagram"></i></a>
            </li>
          </ul>
        </div>
        <!-- Collapsible content -->

      </div>

    </nav>
    <!--/.Navbar-->
    <!--Mask-->
    <div id="intro" class="view">

      <div class="mask rgba-black-strong">

        <div class="container-fluid d-flex align-items-center justify-content-center h-100">

          <div class="row d-flex justify-content-center text-center">

            <div class="col-md-10">

              <!-- Heading -->
              <h2 class="display-4 font-weight-bold white-text pt-5 mb-2">初中</h2>

              <!-- Divider -->
              <hr class="hr-light  my-4 w-75">

              <!-- Description -->
              <h4 class="white-text subtext-header mt-2 mb-4">或许一切都会习惯，时间会磨平所有不适。</h4>
              <a href="#about" style="color:white">
                <button type="button" class="btn btn-outline-white">Read more<i class="fas fa-book ml-2"></i></button>
              </a>

            </div>

          </div>

        </div>

      </div>

    </div>
    <!--/.Mask-->
  </header>
  <!--Main Navigation-->

  <main class="mt-5">

    <!-- container -->
    <div class="container" id="about">

      <!--Section: Examples-->

      <hr class="my-5">

      <!--Section: Gallery-->
      <section id="gallery">

        <!-- Heading -->
        <h2 class="mb-5 font-weight-bold text-center">重庆市云阳县龙角初级中学</h2>

        <!--Grid row-->
        <div class="row">

          <!--Grid column-->
          <div class="col-md-6 mb-4">

            <!--Carousel Wrapper-->
            <div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
              <!--Indicators-->
              <ol class="carousel-indicators">
                <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-2" data-slide-to="1"></li>
                <li data-target="#carousel-example-2" data-slide-to="2"></li>
              </ol>
              <!--/.Indicators-->
              <!--Slides-->
              <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                  <div class="view">
                    <img class="d-block w-100" src="./img/myimg/cz/cz3.jpg" alt="First slide">
                    <div class="mask rgba-black-slight"></div>
                    <!-- <div class="mask rgba-black-light"></div> -->
                  </div>
                  <!-- <div class="carousel-caption">
                                    <h3 class="h3-responsive">Light mask</h3>
                                    <p>First text</p>
                                </div> -->
                </div>
                <div class="carousel-item">
                  <!--Mask color-->
                  <div class="view">
                    <img class="d-block w-100" src="./img/myimg/cz/cz4.jpg" alt="Second slide">
                    <div class="mask rgba-black-slight"></div>
                    <!-- <div class="mask rgba-black-strong"></div> -->
                  </div>
                  <!-- <div class="carousel-caption">
                                     <h3 class="h3-responsive">Strong mask</h3>
                                    <p>Secondary text</p>
                                </div> -->
                </div>
                <div class="carousel-item">
                  <!--Mask color-->
                  <div class="view">
                    <img class="d-block w-100" src="./img/myimg/cz/cz6.jpg" alt="Third slide">
                    <div class="mask rgba-black-slight"></div>
                  </div>
                  <!-- <div class="carousel-caption">
                                     <h3 class="h3-responsive">Slight mask</h3>
                                    <p>Third text</p> 
                                </div> -->
                </div>
              </div>
              <!--/.Slides-->
              <!--Controls-->
              <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
              <!--/.Controls-->
            </div>
            <!--/.Carousel Wrapper-->

          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-md-6">

            <!-- Excerpt
                    <a href="" class="teal-text">
                        <h6 class="pb-1"><i class="fas fa-heart"></i><strong> Lifestyle </strong></h6>
                    </a> -->
            <h4 class="mb-3"><strong>正德厚业，自强不息</strong></h4>
            <p> 重庆市云阳龙角初级中学，秉齐曜之厚重；承泥溪之灵秀。于1958年诞生于这方热土，始名“云阳县第三中学”，
              后更名为云阳县龙角初级中学，现有在职编教职工99人，学生1600余人。
              学校占地面积40余亩，建筑总面积16780平米，每个教室都配备了高级别的“班班通”、实物展示台，
              实现了班班多媒体教学。我校还拥有塑胶运动场，为同学们的课余活动提供了最完美的场所。
            </p>

            <p>学校采用多种手段促进教育教学发展。首先，以文明礼仪进校园为抓手，深化学生德育教育；
              其次，大力推进新课程改革，以学案导学、小组学习为抓手开展“271”高效课堂；
              另外，以丰富多彩的兴趣小组为抓手搞好第二课堂，促进学生全面发展，近四年来，重高升学人数在江南片区稳居第一：
              龙角中学竖起了云阳江南初中教育的一面旗帜，赢得了各级党政、社会各界和广大群众的交口称赞，
              我们将矢志不渝，竭诚奉献，将龙角中学办成让龙角人民满意的江南名校。</p>
            <p>by <a><strong>Yingchuan Zhou</strong></a>, 26/05/2021</p>
            <a href="http://www.023xiaoyuan.com/detail/intro/sid/14164518277268816" class="btn btn-purple btn-md">learn
              more</a>

          </div>
          <!--Grid column-->

        </div>
        <!--Grid row-->

      </section>
      <!--Section: Gallery-->


      <hr class="my-5">
      <!--Grid column-->
      <div class="col-md-6 mb-4">
        <!--Carousel Wrapper-->
        <div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
          <video width="1000" height="500" controls>
            <source src="./img/myimg/cz/czvidio.mp4" type="video/mp4">
          </video>
        </div>
      </div>
      <!--Grid column-->

      <!--Section: Best Features-->

      <hr class="my-5">

      <!--Section: Examples-->
      <section id="examples" class="text-center">

        <!-- heading -->
        <h2 class="mb-5 font-weight-bold">五行</h2>

        <!--Grid row-->
        <div class="row">

          <!--Grid column-->
          <div class="col-lg-4 col-md-12 mb-4">

            <div class="view overlay z-depth-1-half">
              <img src="./img/myimg/cz/cz1.jpg" class="img-fluid">
              <img src="./img/myimg/cz/cz13.jpg" class="img-fluid">
              <a href="#!">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>

            <h4 class="my-4 font-weight-bold">金木水火土</h4>
            <p class="grey-text">五行学说早在中国古代就已存在，是一种认识、观察客观世界的哲学观念。
              五行学说不仅是在古代还是在现代都被广泛应用，古人认为，天地万物都是有金木水火土五种物质构成的，
              自然界各种事物和现象的发展、变化都是由这五种不同属性的物质不断运动和相互作用的结果。</p>

          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-lg-4 col-md-6 mb-4">

            <div class="view overlay z-depth-1-half">
              <img src="./img/myimg/cz/cz7.jpg" class="img-fluid">
              <a href="#!">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>

            <h4 class="my-4 font-weight-bold">木性人</h4>
            <p class="grey-text">他往往以较高的伦理道德准则而受到人们的尊重。他懂得事物的内在价值。
              他兴趣广泛，但又有合作精神，使他做事常以大局为重。他具有做行政官员的气质，
              能够将不同性质的事物分别归类，整理得有条不絮。顽强的自信心、进取精神和宽广的胸怀使他们多从事于巨大工程的建设、
              制定长期规划性工作或者高级科研工作。</p>

          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-lg-4 col-md-6 mb-4">

            <div class="view overlay z-depth-1-half">
              <img src="./img/myimg/cz/cz9.jpg" class="img-fluid">
              <a href="#!">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>

            <h4 class="my-4 font-weight-bold">土性人</h4>
            <p class="grey-text">他带有更多的实践精神，讲求效果。他具有很好的演绎、推理能力，追求可以施展他们实际能力的可靠事务。
              靠着他的远见卓识和极强的组织能力，这些人会是作用很大的筹划者或管理者。无论何种东西，一经他们之手，便可派上用场。
              他对经济事宜谨慎从事，掌管自己的钱财也十分精明。他在实行自己精心策划的计划时，既有见地，又很实际。
            </p>

          </div>
          <!--Grid column-->

        </div>
        <!--Grid row-->

        <!--Grid row-->
        <div class="row">

          <!--Grid column-->
          <div class="col-lg-4 col-md-12 mb-4">

            <div class="view overlay z-depth-1-half">
              <img src="./img/myimg/cz/cz11.jpg" class="img-fluid">
              <a href="#!">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>

            <h4 class="my-4 font-weight-bold">火性人</h4>
            <p class="grey-text">他表现出非凡的领导气质，他自信心强处理事情果断。他具有火的特性，激进活跃。
              常常尽最大力量去激励人们，将他的目标计划付诸实现并取得成果。他们喜欢冒险，富有革新精神。
              他易接受可行的新建议，善于支配他人为充实、发展自己的计划作出努力。</p>

          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-lg-4 col-md-6 mb-4">

            <div class="view overlay z-depth-1-half">
              <img src="./img/myimg/cz/cz12.jpg" class="img-fluid">
              <a href="#!">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>

            <h4 class="my-4 font-weight-bold">水性人</h4>
            <p class="grey-text">他比一般人更善交际，总能将自己的观点不知不觉地灌输给他人，以使自己的观点扩大影响，
              成为人们达成一致的意见或协议。他的情感基本是由同情心升发而来的感情的充分流露。
              他懂得如何克制自己，决不让旁人在做事时产生受到他们影响的念头。</p>

          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-lg-4 col-md-6 mb-4">

            <div class="view overlay z-depth-1-half">
              <img src="./img/myimg/cz/cz8.jpg" class="img-fluid">
              <a href="#!">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>
            <h4 class="my-4 font-weight-bold">金性人</h4>
            <p class="grey-text">他做事强硬、刚毅的态度与金的特性是分不开的，他做事时受毫不犹豫的强烈情感驱使，
              竭力促成自己所做事情的成功。他在受到某个目标的吸引时，不论时间多久，只要下定决心，便毫不退缩，
              不达目的决不罢休。他喜欢独自处理、解决各种问题，决不愿受别人的干预，他自己规划蓝图，
              清除前进道路上的障碍，希望靠自力更生实现自己的目标。</p>
          </div>
          <!--Grid column-->

        </div>
        <!--Grid row-->

      </section>
      <!--Section: Examples-->

      <hr class="my-5">
      <!--Main container-->
      <div class="container">
        <!--Grid row 1-->
        <div class="row">
          <!--Grid column 1-->
          <div class="col-md-7">
            <div class="view overlay z-depth-1-half">
              <img src="./img/myimg/cz/cz2.jpg" class="card-img-top" alt="">
              <div class="mask rgba-white-light"></div>
            </div>
          </div>
          <!--Grid column-->
          <!--Grid column 2-->
          <div class="col-md-5">
            <h2>06/2015,毕业于龙角初级中学</h2>
            <hr>
            <p>光阴似箭，三年美好而艰辛的初中生活犹如漏斗中的沙石已悄然流进昨日。
              站在漫漫求学道路终点站的我们心潮澎湃，思绪万千，昔日的点点滴滴，林林总总，跃然而起，历历在目。
              此时面对着我可爱的同学，面对着美丽的校园，我心中虽有千言万语，却只字难出。</p>
            <p>路漫漫其修远兮，吾将上下而求索，细细寻思，初中生活是忙碌的。每天我们在日出日落间寻找喘息的时间。
              堆积如山的课本、作业是我们最常抱怨的理由。有时甚至觉得自己这么辛苦到底是为什么，然而我们却没有多余的时间去思考，
              就这样无声无息地进行下去。一切都会习惯，时间会磨平所有的不适。</p>
            <!-- <a href="#" class="btn btn-primary offset-90">Get it now!</a> -->
          </div>
          <!--Grid column-->
        </div>
        <!--Grid row-->
      </div>

  </main>


  <!-- Footer -->
  <footer class="page-footer font-small pt-4" style="background-color: #563e91">

    <!-- Footer Elements -->
    <div class="container">

      <!-- Social buttons -->
      <ul class="list-unstyled list-inline text-center">
        <li class="list-inline-item">
          <a class="btn-floating btn-fb mx-1">
            <i class="fab fa-facebook-f"> </i>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn-floating btn-tw mx-1">
            <i class="fab fa-twitter"> </i>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn-floating btn-gplus mx-1">
            <i class="fab fa-google-plus-g"> </i>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn-floating btn-li mx-1">
            <i class="fab fa-linkedin-in"> </i>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn-floating btn-dribbble mx-1">
            <i class="fab fa-dribbble"> </i>
          </a>
        </li>
      </ul>
      <!-- Social buttons -->

    </div>
    <!-- Footer Elements -->

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3">© 2018 Copyright:
      <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
    </div>
    <!-- Copyright -->

  </footer>
  <!-- Footer -->

  <!-- End your project here-->

  <!-- jQuery -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
  <!-- Your custom scripts (optional) -->
  <script type="text/javascript"></script>

</body>

</html>